import 'package:flutter/material.dart';

import 'RoutePath.dart';

/// 应用的主界面组件 , 整个应用的初始根节点
class MainNavigatorWidget extends StatefulWidget {
  const MainNavigatorWidget({super.key});

  @override
  State<MainNavigatorWidget> createState() => _MainNavigatorWidgetState();
}

class _MainNavigatorWidgetState extends State<MainNavigatorWidget> with SingleTickerProviderStateMixin {
  /// 当前的索引值
  int _selectedIndex = 0;

  /// PageView控制器，用于控制 页面切换
  final _pageController = PageController(
    /// 初始化索引值
    initialPage: 0,
  );

  @override
  void dispose() {
    super.dispose();

    /// 销毁 PageView 控制器
    _pageController.dispose();
  }

  void _onItemTapped(int index) {
    setState(() {
      /// 更新当前的索引值
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// 滑动组件，界面的核心元素
      body: PageView(
        /// 控制跳转翻页的控制器
        controller: _pageController,

        /// 页面滑动
        onPageChanged: _onItemTapped,

        // physics: const NeverScrollableScrollPhysics(),

        /// 同一时间只显示一个页面组件
        children: pages,
      ),

      /// 设置底部导航栏按钮
      bottomNavigationBar: BottomNavigationBar(
        /// 当前选中的导航索引
        currentIndex: _selectedIndex,

        /// 底部导航栏的点击方法
        onTap: (index) {
          /// 控制 PageView 跳转到指定的页面
          _pageController.jumpToPage(index);
          _onItemTapped(index);
        },

        /// 图标和文本位置不变
        type: BottomNavigationBarType.fixed,

        /// 设置底部的若干点击导航栏点击按钮
        /// 注意该 List<BottomNavigationBarItem> items
        /// 中的按钮顺序 , 要与 PageView 中的页面顺序必须保持一致
        /// 个数个顺序都要保持一致
        items: dataList.map(
          (TabData data) {
            return BottomNavigationBarItem(
              /// 默认状态下的图标, 灰色
              icon: Icon(
                data.icon,
                color: Colors.grey,
              ),

              /// 选中状态下的图标, 蓝色
              activeIcon: Icon(
                data.icon,
                color: Colors.blue,
              ),

              /// 导航栏的文本
              label: data.title,
            );
          },
        ).toList(),
      ),
    );
  }
}

/// 封装导航栏的图标与文本数据
class TabData {
  /// 导航数据构造函数
  const TabData({required this.index, required this.title, required this.icon});

  /// 导航标题
  final String title;

  /// 导航图标
  final IconData icon;

  /// 索引
  final int index;
}

/// 导航栏数据集合
const List<TabData> dataList = <TabData>[
  TabData(index: 0, title: '首页', icon: Icons.home_outlined),
  TabData(index: 1, title: '组件', icon: Icons.camera),
  TabData(index: 2, title: '我的', icon: Icons.person_outlined),
];
